<!-- 记录筛选 -->
<template>
  <div class="RecordFilter-container">
    <TitleBar title="记录筛选器"></TitleBar>
    <ConditionFilter
      :butText="'搜索'"
      :EmptyBut="true"
      ref="ConditionRef"
      @headleSubmit="headleSubmit"
      @headleEmpty="headleEmpty"
    >
      <div class="item">
        <span>学生</span>
        <el-select
          v-model="selStudentRef"
          :disabled="isDisabledRef"
          placeholder="请选择学生"
          style="width: 150px"
        >
          <el-option
            v-for="item in studentDataRef"
            :key="item.id"
            :label="item.studentName"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="item time">
        <span>起始日期</span>
        <el-date-picker
          style="width: 150px"
          v-model="originTimeRef"
          type="date"
          placeholder="请选择起始时间"
        />
      </div>
      <div class="item time">
        <span>终止日期</span>
        <el-date-picker
          style="width: 150px"
          v-model="endTimeRef"
          type="date"
          placeholder="请选择终止时间"
        />
      </div>
    </ConditionFilter>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import ConditionFilter from "@/components/ConditionFilter/index.vue";
import { onMounted, ref, watchEffect } from "vue";
const ConditionRef = ref(); // DOM元素
const isDisabledRef = ref(true); // 学生选择框是否可选
const studentDataRef = ref([]); // 学生数据
const selStudentRef = ref(); // 选中的学生数据
const originTimeRef = ref(); // 起始时间
const endTimeRef = ref(); // 终止时间
// 监听宿舍id是否有值
onMounted(() => {
  watchEffect(() => {
    if (!ConditionRef.value.roomId) {

      isDisabledRef.value = true
      return 
    };
    studentDataRef.value = ConditionRef.value.roomId[0].movingInStudents.map(
      (item) => item
    );
    isDisabledRef.value = ConditionRef.value.roomId ? false : true;
  });
});
const emit = defineEmits(["headleSubmit"])
// 获取选择框的数据
const headleSubmit = (data) => {

  if (!selStudentRef.value) {
    ElMessage.error("请选择学生");
    return;
  }
  let condition = {};
  condition = {
    ...data,
    selStudent: selStudentRef.value,
    originTime: +originTimeRef.value || "",
    endTime: +endTimeRef.value || "",
  };
  emit("headleSubmit",condition)
};
// 清空
const headleEmpty = () =>{
  selStudentRef.value = "";
  originTimeRef.value = "";
  endTimeRef.value = "";
  studentDataRef.value = []
}
</script>

<style lang="less" scoped>
.RecordFilter-container {
  width: 100%;
  .condition-container {
    height: 100px;
  }
  .item {
    span {
      margin-right: 10px;
    }
    &.time {
      margin-top: 15px;
      margin-right: 20px;
    }
  }
}
</style>